<template>
  <div class="menu">
    <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
      <el-menu
        router
        :collapse="isCollapse"
        :style="{ width: isCollapse ? '65px' : '256px', height: '100%' }"
        :collapse-transition="false"
        unique-opened
        :default-active="$route.fullPath"
        background-color="rgb(49 66 85)" 
        style="border:2px solid rgb(49 66 85)"
        text-color="#ffffff"
      >
        <template v-for="menu in menuList">
          <el-menu-item
            v-if="!menu.children"
            :index="menu.path"
            :key="menu.path"
          >
            <i :class="menu.icon"></i>
            <span slot="title">{{ menu.name }}</span>
          </el-menu-item>

          <el-submenu v-else :index="menu.path" :key="menu.name + menu.path">
            <template #title>
              <i :class="menu.icon || 'el-icon-location'"></i>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item
              v-for="m in menu.children"
              :key="m.path"
              :index="m.path"
            >
              {{ m.name }}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import menuList from "@/components/menu";
export default {
  data: function () {
    return {
      menuList,
    };
  },
  computed: {
    isCollapse() {
      return this.$store.state.system.isCollapse;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.menu {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  overflow: hidden;
  height: calc(100% - 60px);

  /deep/ .el-scrollbar__wrap {
    // overflow-x: hidden;

    .el-scrollbar__view {
      height: 100%;
    }
  }

  /deep/ .el-submenu__title:hover,
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: #000033 !important;
  }
}
</style>